<!--
 * @Author: gyp
 * @Date: 2020-05-11 09:13:28
 * @LastEditors: gyp
 * @LastEditTime: 2020-06-18 18:27:58
 * @Description: 数据考核列表弹出框
 * @FilePath: \sy_kjxc_web\src\views\screen\components\datacheckDialog.vue
 -->
<template>
  <div class="dataCheck">
    <el-dialog title="实时线路考勤" :visible.sync="visible" @closed="onClosed" custom-class="blue">
      <el-table :data="tableDatas && tableDatas.rows" border class="blueTable" style="width:100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="platformName" label="平台" min-width="100" />
        <el-table-column prop="date" label="巡逻时间" min-width="100" />
        <el-table-column prop="lineName" label="巡逻线路" min-width="110" />
        <el-table-column label="考勤点" min-width="60">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'point')"
              type="text"
              size="small"
            >{{ scope.row.spotCount }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="未考勤数" min-width="60">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'nopunch')"
              type="text"
              size="small"
            >{{ scope.row.noClockCount }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="考勤数" min-width="60">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'punch')"
              type="text"
              size="small"
            >{{ scope.row.hasClockCount }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="已出警数" min-width="60">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row, 'police')"
              type="text"
              size="small"
            >{{ scope.row.alarmCount }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :tabledatas="tableDatas" :isScreen="true" @comgetData="getCheckList" />
      <el-dialog
        title="考勤点"
        :visible.sync="pointVisible"
        append-to-body
        @closed="onPointClosed"
        custom-class="blue"
      >
        <el-table :data="pointDatas && pointDatas.rows" border class="blueTable" style="width:100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="name" label="考勤点" min-width="100" />
          <el-table-column prop="address" label="位置" min-width="150" />
          <el-table-column prop="date" label="巡逻时间" min-width="100" />
        </el-table>
        <Pagination :tabledatas="pointDatas" :isScreen="true" @comgetData="getPointList" />
      </el-dialog>
      <el-dialog
        :title="hasClocked ? '考勤数': '未考勤数'"
        :visible.sync="clockVisible"
        append-to-body
        @closed="onClockClosed"
        custom-class="blue"
      >
        <el-table :data="clockDatas && clockDatas.rows" border class="blueTable" style="width:100%">
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="lineName" label="线路" min-width="100" />
          <el-table-column prop="spotName" label="点位" min-width="100" />
          <el-table-column prop="userName" label="负责人" min-width="55" />
          <el-table-column prop="phone" label="电话" min-width="70" />
          <el-table-column prop="clockTime" :label="hasClocked ? '打卡时间' : '未打卡时间'" min-width="150" />
        </el-table>
        <Pagination :tabledatas="clockDatas" :isScreen="true" @comgetData="getClockList" />
      </el-dialog>
      <el-dialog
        title="已出警数"
        append-to-body
        :visible.sync="policeVisible"
        @closed="onPoliceClosed"
        custom-class="blue"
      >
        <el-table
          :data="policeDatas && policeDatas.rows"
          border
          class="blueTable"
          style="width:100%"
        >
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column prop="startTime" label="出警日期" min-width="100" />
          <el-table-column prop="endTime" label="结束时间" min-width="100" />
          <el-table-column prop="useTime" label="出警时长" min-width="50" />
          <el-table-column prop="userName" label="出警人" min-width="60" />
        </el-table>
        <Pagination :tabledatas="policeDatas" :isScreen="true" @comgetData="getPoliceList" />
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
export default {
  name: 'datacheck-dialog',
  components: {
    Pagination
  },
  data () {
    return {
      lineId: '', // 当前线路
      nowDate: '', // 今天的日期
      hasClocked: true, // 是否是已考勤数据
      visible: true, // 弹出框可见性
      tableDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      }, // 表格数据
      pointVisible: false, // 考勤点
      clockVisible: false, // 未打卡和已打卡
      policeVisible: false, // 已出警
      pointDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      }, // 考勤点
      clockDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      }, // 未打卡和已打卡
      policeDatas: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        rows: []
      } // 已出警
    };
  },
  watch: {
    pointVisible (newVal) {
      if (newVal) {
        this.getPointList();
      }
    },
    clockVisible (newVal) {
      if (newVal) {
        this.getClockList();
      }
    },
    policeVisible (newVal) {
      if (newVal) {
        this.getPoliceList();
      }
    }
  },
  created () {
    let today = new Date();
    let month = today.getMonth() + 1;
    let day = today.getDate();
    let nowDate =
      today.getFullYear() +
      '-' +
      (month < 10 ? '0' + month : month) +
      '-' +
      (day < 10 ? '0' + day : day);
    this.nowDate = nowDate;
    this.getCheckList();
  },
  methods: {
    // 考勤打卡列表
    getCheckList (pageNumber = 1) {
      let params = {
        startDate: this.nowDate,
        endDate: this.nowDate,
        pageSize: 10,
        pageNumber
      };
      this.$api.screen.checkList(params).then(res => {
        this.tableDatas = {
          ...res.data,
          pageNum: pageNumber,
          pageSize: 10
        };
      });
    },
    // 考勤点
    getPointList (pageNumber = 1) {
      let params = {
        lineId: this.lineId,
        pageSize: 10,
        pageNumber
      };
      this.$api.screen.spotList(params).then(res => {
        this.pointDatas = {
          ...res.data,
          pageNum: pageNumber,
          pageSize: 10
        };
      });
    },
    // 考勤数据
    getClockList (pageNumber = 1) {
      let params = {
        lineId: this.lineId,
        startDate: this.nowDate,
        endDate: this.nowDate,
        pageSize: 10,
        pageNumber
      };
      if (this.hasClocked) {
        this.$api.screen.hasClockedList(params).then(res => {
          this.clockDatas = {
            ...res.data,
            pageNum: pageNumber,
            pageSize: 10
          };
        });
      } else {
        this.$api.screen.noClockedList(params).then(res => {
          this.clockDatas = {
            ...res.data,
            pageNum: pageNumber,
            pageSize: 10
          };
        });
      }
    },
    // 出警
    getPoliceList (pageNumber = 1) {
      let params = {
        lineId: this.lineId,
        startDate: this.nowDate,
        endDate: this.nowDate,
        pageSize: 10,
        pageNumber
      };
      this.$api.screen.dealproblemsList(params).then(res => {
        this.policeDatas = {
          ...res.data,
          pageNum: pageNumber,
          pageSize: 10
        };
      });
    },
    // 关闭弹出框
    onClosed () {
      this.$emit('onDatacheckClose');
    },
    // 每行点击操作
    handleClick (row, type) {
      if (type === 'punch') {
        this.hasClocked = true;
      } else if (type === 'nopunch') {
        this.hasClocked = false;
      }
      this.lineId = row.lineId;
      switch (type) {
        case 'point':
          this.pointVisible = true;
          this.clockVisible = false;
          this.policeVisible = false;
          break;
        case 'nopunch':
        case 'punch':
          this.pointVisible = false;
          this.clockVisible = true;
          this.policeVisible = false;
          break;
        case 'police':
          this.pointVisible = false;
          this.clockVisible = false;
          this.policeVisible = true;
          break;
        default:
          break;
      }
    },
    onPointClosed () {
      this.pointVisible = false;
      this.policeVisible = false;
    },
    onClockClosed () {
      this.clockVisible = false;
    },
    onPoliceClosed () {
      this.policeVisible = false;
    }
  }
};
</script>
